<template>
  <div>
    <h1>Bar Chart with D3.js in Vue</h1>
    <div ref="chart"></div>
  </div>
</template>

<script>
import * as d3 from "d3"
import { mockData } from "../mockData"
export default {
  data() {
    return {
      chartData: [], // 用于存储动态数据的数组

      queue: [],
      lastX: 0,
      lastY: 0,
      currentX: 0,
      currentY: 0,

      newData : [
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
          ...mockData[0].wav,
        ]
    }
  },
  mounted() {
    this.initializeChart()
    this.startDataSimulation()
  },
  methods: {
    initializeChart() {
      // 初始化心电图
      const svg = d3
        .select(this.$refs.chart)
        .append("svg")
        .attr("width", 1000)
        .attr("height", 300)

      this.path = svg
        .append("path")
        // .datum(this.chartData)
        .attr("fill", "none")
        .attr("stroke", "red")
        .attr("stroke-width", 2)
    },
    startDataSimulation() {
      // 模拟实时数据更新
    //   setInterval(() => {
          this.chartData = [
            ...mockData[0].wav,
            ...mockData[0].wav,
            ...mockData[0].wav,
            ...mockData[0].wav,
          ]
        // this.chartData.push(...mockData[0].wav)
        // if (this.chartData.length > 4) {
        //   this.chartData.shift() // 限制数据长，超过时移除最旧的数据点
        // }
        this.updateChart()
    //   }, 1000) // 每秒更新一次数据
    //   this.timer = setInterval(() => {
    //     this.generateData() // 生成50个新数据点
    //     this.updateChart()
    //     // this.moveGap() // 移动缺口
    //   }, 50) // 每20毫秒更新一次数据
    },
    generateData() {
        this.chartData.push(...this.newData.splice(0,50))
        const startIndex = this.chartData.length-4000
        this.chartData=this.chartData.slice(startIndex)
        console.log('this.chartData:',this.chartData);
        
    },
    updateChart() {
      // 更新心电图
      const xScale = d3.scaleLinear().domain([0, 4000]).range([0, 1000])

      const yScale = d3.scaleLinear().domain([-6000, 6000]).range([300, 0])

      const line = d3
        .line()
        .x((d, i) => xScale(i))
        .y((d) => yScale(d))

      this.path.attr("d", line(this.chartData))
    },
    draw() {
      const p = d3.path()

      //   if (this.lastX === 0) {
      //     this.ctx.clearRect(this.x_start - 2, 0, this.clearGap, this.height)
      //   } else {
      //     this.ctx.clearRect(
      //       this.x_start + this.lastX,
      //       0,
      //       this.clearGap,
      //       this.height
      //     )
      //   }
      for (let i = 0; i < this.step; i++) {
        // if (this.queue.length === 0) {
        //   this.currentY = this.itemHeight / 2
        // } else {
        let v = this.queue.shift()
        //   this.currentY =
        //     ((-1.0 * v) / this.yMax) * this.itemHeight + this.itemHeight
        // }
        p.moveTo(this.lastX, this.lastY)
        p.lineTo(this.currentX, this.currentY)
        p.closePath()
        // this.ctx.moveTo(this.x_start + this.lastX, this.offsetY + this.lastY)
        // this.ctx.lineTo(
        //   this.x_start + this.currentX,
        //   this.offsetY + this.currentY
        // )
        // this.lastX = this.currentX
        // this.lastY = this.currentY

        // this.currentX +=
        //   (this.grid_width * 20 * this.speedRatio) / this.frameSize

        // if (this.x_start + this.currentX >= this.width * 0.65 + 25) {
        //   this.currentX = 0
        //   this.lastX = 0
        // }
      }
      p.closePath()
    },

    loop() {
      if (this.queue.length) {
        this.draw()
        this.loopTimer = setTimeout(this.loop, 20)
      } else {
        clearTimeout(this.loopTimer)
        this.loopTimer = null
      }
    },

    addData(arr) {
      this.queue.push(...arr)
      this.frameSize = arr.length
      this.step = Math.floor((this.queue.length / 1000) * 20)
      if (!this.loopTimer) {
        this.loop()
      }
    },
  },
}
</script>
